<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one{
				width: 1000px;
				height: 700px;
				background-color: antiquewhite;
				margin: 0 auto;
				clear:both;//此处意思是清除左右浮动的影响//clear:left;清除左浮动的影响,写在被影响的元素之下
			overflow: hidden;//对受影响的标签使用此可清除浮动对其的影响
	
			
			
			}      
			#one:after{        //对父元素即需要清除浮动,适用于1E8及以上浏览器和其他非IE浏览器,标签设置height:0,否则会比实际高,还要在伪类对象设content
			属性,属性值可以为空.
			                 
				display: block;
				clear: both;
				content: "";
				visibility: hidden;
				height: 0;
			}											 
														 
														 
														 //clear:right;此处右浮动的影响,写在被影响的元素之下
			.four,.three,.two{
				width: 300px;
				height: 300px;
				background-color: aqua;
				float: left;//浮动属性float:left元素向左浮动
				                       float:right元素向右浮动
									   float:none元素不浮动
				
			}
			.three{
				margin:0px 25px ;
			}
			.five{
				height: 400px;
				width:1000px ;
				clear: all;
				border-style: dotted;
				background-color: red;
				margin:350px;}
				p{
					clear:both;//在浮动元素后加空标签div p hr等任何标签,并在空标签样式写clear:both可清楚浮动影响
				}
			
				

		</style>
	</head>
	<body>
	<div id="one">
		<div class="two">			</div>
		<div class="three">         </div>
		<div class="four">          </div>
		<div class="five">11111</div>//浮动内容装在一个盒子里变的可控，最外面一个盒子宽高不设置，盒子铺满全屏幕，宽高根据内容来定，加浮动盒子会变形，浮动
会影响父元素	</div>
<p> </p>
	</body>
</html>
